/*
  学习目标：生命周期-更新阶段
    1. 触发组件更新的方式（常用），两种：
      1. 💥`props` 值的改变
      2. `💥setState()` 改变state
    2. 更新阶段触发的钩子函数，有两个
      1. `render` 
      2. `componentDidUpdate` 
    3. `render`与`componentsDidUpdate` 都可以拿到更新后的值。
    4. `render`与`componentsDidUpdate` 中都不能调用`setState` ，会造成死循环。


*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 99,
  };
  render() {
    const { count } = this.state;

    return (
      <div>
        App
        <Child count={count}></Child>
        <button
          onClick={() => {
            this.setState({ count: count + 1 });
          }}
        >
          点我+1
        </button>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    const { count } = this.props;
    console.log('render  ----->  ', count);
    return <div>Child - {count}</div>;
  }

  // 类似vue中的: updated
  // 场景: 做watch监听, 做缓存
  componentDidUpdate() {
    const { count } = this.props;
    console.log('componentDidUpdate  ----->  ', count);
  }
}
